<template>  
  <div class="teacher-wrap">  
    <h1 >全部讲师</h1>  
    <div class="teacher-list">  
      <div class="teacher-box" style="margin-top: 30px;">  
        <div  
        @click="teacherTodetail(item.id)"  
          class="teacher-left"  
          v-for="item in teacherList"  
          :key="item.id"  
          style="margin-bottom: 20px;"
        >  
          <img :src="item.avatar" style="width:170px;  height: 230px;" />  
          <div class="teacher-right">  
            <p class="name">{{ item.name }}</p>  
            <div class="teacher-subject">  
              <el-button type="primary" size="small">高级讲师</el-button>  
            </div>  
            <p class="teacher-career">{{ item.career }}</p>  
            <div class="teacher-opBtn">  
              <span class="teacher-user"><el-button type="danger" @click=teacherTodetail(item.id)>进入主页</el-button></span>  
            </div>  
          </div>  
        </div>  
      </div>  
    </div> 
    <!-- 分页器 -->
    <div style="margin-top: 20px; " class="page">
        <el-config-provider :locale="zhCn">
          <el-pagination
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[8, 16, 24, 32]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="getList"
            @current-change="getList"
          >
          </el-pagination>
        </el-config-provider>
      </div>
      </div>
</template> 

<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref } from "vue";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import axios from "../../assets/js/axios";
//分页
let locale = zhCn;
const currentPage4 = ref(1);
const pageSize4 = ref(8);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);
const total = ref(0);

const router = useRouter();
const teacherList = ref<any>([]);
const getList = () => {
  //发送轮播图列表请求，目前使用课程列表代替
  axios
    .get("/serviceedu/edu-teacher/TeacherList", {})
    .then((res: any) => {
      //轮播图图片列表
      teacherList.value = res.data.list;
      console.log(res.data.list);
    });

    axios
    .get("/serviceedu/edu-teacher/getPageBatchs", {
      page: currentPage4.value, // 当前页码
      size: pageSize4.value, // 每页显示的课程数量
    })
    .then((res: any) => {
      //轮播图图片列表
      teacherList.value = res.data.list;
      total.value = res.data.total;
    });
};
getList();
const teacherTodetail=(id?: any)=>{
  router.push({path: '/teacherTodetail', query: {id: id}})
}
</script>

<style lang="less" scoped>  
.teacher-wrap {  
  max-width: 1200px;  
  margin: 0 auto;  
}  
  
.teacher-list {  
  display: flex;  
  flex-wrap: wrap;  
  justify-content: space-between;  
}  
  
.teacher-box {  
  display: flex;  
  flex-wrap: wrap;  
}  
  
.teacher-left {  
  width: calc(48% - 20px);     
  box-sizing: border-box;    
  padding: 20px;    
  border: #b1b3b8 1px solid;    
  margin: 20px;  
  display: flex;   
  flex-direction: row;  // 改为行布局  
  align-items: center;  // 垂直居中  
  justify-content: space-between;  // 水平间距 
  .teacher-right {  
    margin-left: 10px;
  margin-top: 10px;  
}  
.name {  
  font-size: 20px;  
}  
  
.teacher-subject {  
  margin-top: 5px;  
}  
  
.teacher-career {  
  margin-top: 10px;  
}  
  
.teacher-opBtn {  
  margin-top: 10px;  
}  
  
.teacher-user {  
  display: block;  
  margin-left: 260px;
}  

}  
.el-pagination {
    justify-content: center;
    margin: 30px 0;
  }

</style>